<!-- 项目审批 -->
<template>
	<view>
		<cu-custom bgColor="bg-blue2" :isBack="true" @back="backedPage"><block slot="backText">返回</block><block slot="content">移库明细</block></cu-custom>
		<uni-nav-bar :fixed="true" color="#333333" background-color="#4364F7" :border="false">
			<view class="input-view">
				<uni-icons type="search" size="22" color="bg-blue" />
				<input v-model="searchVal" confirm-type="search" class="input" type="text" placeholder="原货位/规格" @confirm="search">
				<uni-icons :color="'#999999'" v-if="searchVal!==''" class="icon-clear" type="clear" size="22" @click="clear" />
			</view>
			<!-- <uni-search-bar style="width: 100%;" placeholder="搜索项目/机构" radius="100" clearButton="auto" @confirm="search" /> -->
		</uni-nav-bar>
		<mescroll-uni :down="downOption" @emptyclick="downCallback" @down="downCallback" :up="upOption" @up="upCallback"
		 :fixed="true">
			<view :style="{ paddingTop: customBarH+'px' }" class="mycard">
				<view v-for="item in cardList" :key="item.id" class="card-item">
					<uni-card is-full title="移库货品" is-shadow note="true" :extra="formatDate(item.dat)" thumbnail="/static/img/hp.svg">
						<view class="audit-card-content">
							<view class="uni-flex uni-row">
								<view class="flex-item-30">名称</view>
								<view class="flex-item-70">{{item.inStockGoodsDetail.goodsName}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">规格</view>
								<view class="flex-item-70">{{item.inStockGoodsDetail.spec}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">产地</view>
								<view class="flex-item-70">{{item.inStockGoodsDetail.maker}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">型号</view>
								<view class="flex-item-70">{{item.inStockGoodsDetail.model}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">材质</view>
								<view class="flex-item-70">{{item.inStockGoodsDetail.materialCode}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">原货位</view>
								<view class="flex-item-70">{{item.goodsPosiOrg}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">新货位</view>
								<view class="flex-item-70">{{item.goodsPosiNew}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">原数量</view>
								<view class="flex-item-70 text-green">{{item.qtyOriginal}} {{item.inStockGoodsDetail.qtyUnit}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">原重量</view>
								<view class="flex-item-70 text-green">{{item.weightOriginal}} {{item.inStockGoodsDetail.weightUnit}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">可移数量</view>
								<view class="flex-item-70 text-yellow">{{item.qtyAvailable}} {{item.inStockGoodsDetail.qtyUnit}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">可移重量</view>
								<view class="flex-item-70 text-yellow">{{item.weightAvailable}} {{item.inStockGoodsDetail.weightUnit}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">移库数量</view>
								<view class="flex-item-70 text-blue">{{item.qtyActual}} {{item.inStockGoodsDetail.qtyUnit}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">移库重量</view>
								<view class="flex-item-70 text-blue">{{item.weightActual}} {{item.inStockGoodsDetail.weightUnit}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">作业班组</view>
								<view class="flex-item-70">{{item.workGroup}}</view>
							</view>
						</view>

						<template v-slot:footer>
							<view class="footer-box">
								<view class="cuIcon-close text-red" @tap="deleteClick(item)">删除</view>
								<view class="cuIcon-edit text-olive" @tap="editClick(item)">修改</view>
								<view class="cuIcon-form text-blue" @tap="stackClick(item)">码单</view>
							</view>
						</template>
					</uni-card>
				</view>
			</view>
		</mescroll-uni>
		<view v-if="false">
			<uni-fab
				:pattern="pattern"
				:horizontal="horizontal"
				:vertical="vertical"
				:direction="direction"
				:popMenu="false"
				@fabClick="createDetail()">
			</uni-fab>
		</view>
	</view>
</template>

<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import uniCard from "@/components/uni-card/uni-card"
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniFab from '@/components/uni-fab/uni-fab.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		getRandomArrayElements,
		filePreview,
		formatStatus
	} from '@/utils/index.js'
	import { formatDate } from '@/utils/datetime.js'
	export default {
		components: {
			MescrollUni,
			uniCard,
			uniTag,
			uniIcons,
		    uniFab
		},
		computed: mapGetters(['user']),
		data() {
			return {
				mescroll: null,
				isPass: false,
				id: 0,
				// 下拉刷新的常用配置
				downOption: {
					use: false, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: false, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					toTop: {
						src: '/static/img/backtop.png'
					},
					textNoMore: '没有更多数据了'
				},
				// 列表数据
				cardList: [],
				datas:[],
				horizontal: 'right',
				vertical: 'top',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF'
				},
				searchVal: '',
				currDetailId: 0,
				customBarH:this.CustomBar+40
			}
		},
		onLoad(options) {
			try {
				this.id = options.id
			} catch (e) {
				this.id = 0
			}
		},
		onShow() {
			/**
			 * todo: api请求分页查询项目待办
			 */
			uni.showLoading({
				title: '正在查询数据...'
			})
			/**
			 * todo: api请求分页查询项目待办
			 */
			this.$minApi.goodsPosiChngBill(this.id).then(res => {
				const data = res
				if (data) {
					this.cardList = data.goodsPosiChngDetails
					this.datas = this.cardList
					
					if(this.currDetailId>0){
						this.searchVal = this.currDetailId
						this.search()
					}					
				}
			}).catch(err => {
				console.log(err)
			}).finally(() => {
				// mescroll.endErr()
				// 隐藏加载状态
				uni.hideLoading()
			})
		},
		methods: {
			filePreview,
			formatStatus,
			formatDate,
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				// 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
				this.mescroll = mescroll
			},
			/*下拉刷新的回调, 有三种处理方式: */
			downCallback(mescroll) {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
				mescroll.resetUpScroll() // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(mescroll) {

				/**
				 * todo: api请求分页查询项目待办
				 */
				this.$minApi.goodsPosiChngBill(this.id).then(res => {
					const data = res
					if (data) {
						this.cardList = data.goodsPosiChngDetails
					}
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					mescroll.endErr()
				})

			},
			stackClick(item) {
				uni.redirectTo({
					url: `/pages/todo/goodsPosiChngBill/stack?goodsPosiChngBillId=${this.id}&detailId=${item.id}`
				})
			},
			deleteClick(item) {
				const _this = this
				uni.showModal({
				    title: '删除明细',
				    content: '正在删除移库明细，是否删除？',
				    success: function (res) {
				        if (res.confirm) {
				            _this.$minApi.deleteGoodsInDetail(item.id).then(res => {
				            	uni.showToast({
				            	    title: '删除成功',
				            	    duration: 2000
				            	})
				        		  
				        		  var itemIndex = _this.cardList.findIndex(f => f.id === item.id)
				        		  if (itemIndex > -1) {
				        			_this.cardList.splice(itemIndex, 1)
				        		  }
				        	
				            }).catch(err => {
				            	console.log(err)
				            }).finally(() => {
				            })
				        }
				    }
				})
			},
			editClick(item) {
				uni.redirectTo({
					url: `/pages/todo/goodsPosiChngBill/editDetail?goodsPosiChngBillId=${this.id}&detailId=${item.id}`
				})
			},
			createDetail() {
				uni.redirectTo({
					url: `/pages/todo/goodsPosiChngBill/editDetail?goodsPosiChngBillId=${this.id}&detailId=0`
				})
			},
			queryByName(name) {
				uni.showLoading({
					title: '正在查询数据...'
				})
				/**
				 * todo: api请求查询项目待办
				 */
				setTimeout(() => {
					this.cardList = getRandomArrayElements(this.cardList, 1)
					uni.hideLoading()
				}, 3000)

				// this.$minApi.queryProjectTodo({
				// 	projectName: name
				// }).then(res => {
				// 	uni.hideLoading()
				// 	this.cardList = res.rows
				// })
			},
			updateQuery() {
				// 无效
				// if (this.mescroll !== null) {
				// 	this.downCallback(this.mescroll)
				// }
				this.queryByName('')
			},
			search() {
				if (this.searchVal) {
					this.cardList = this.datas.filter(f => f.id === Number(this.searchVal) || f.goodsPosi.includes(this.searchVal) || f.batchNum.includes(this.searchVal) || f.inStockGoodsDetail.spec.includes(this.searchVal))
				} else {
					this.cardList = this.datas
				}
			},
			clear() {
				this.searchVal = ''
				this.search()
			},
			backedPage() {
				uni.redirectTo({
					url: `/pages/todo/index?currentTab=2&currId=${this.id}`
				})
			}
		}
	}
</script>

<style scoped>
	.mescroll-totop {
		opacity: 1 !important;
	}
	/deep/ .uni-fab__circle--rightTop {
		top: 150px !important;
	}
</style>
